<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../../js/mui.min.js"></script>
		<link href="../../css/mui.min.css" rel="stylesheet" />
	</head>
	<style>
		.m_center {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 40px;
			padding: 5px;
		}
		
		.m_val {
			margin-left: 3px;
			margin-right: 3px;
			width: 100%;
			border: none;
			border-radius: 5px;
			font-size: 40px;
			height: 70px;
		}
		.m_center_other {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 5px;
		}
		
		.m_row {
			background: white;
			display: flex;
			border: 1px solid gray;
			border-radius: 4px;
			padding: 2px;
			margin-bottom: 2px;
			align-items:center;
		}
		
		.m_img {
			float: left;
			width: 25%;
		}
		
		h1 {
			width: 17px;
			font-size: 17px;
			word-wrap: break-word;
			letter-spacing: 15px;
		}
		
		h2 {
			width: 13px;
			font-size: 14px;
			word-wrap: break-word;
			letter-spacing: 15px;
		}
	</style>

	<body>
		<!--<header class="mui-bar mui-bar-nav" id="test">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">x号气象站</h1>
		</header>-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="mui-content-padded">
					<!--
                    	作者：kuan.zhou@awit.net.cn
                    	时间：2018-12-08
                    	描述：data-type:数据类型
                			data-chart：图表类型
                			data-title：图表标题
                    -->
					<div class="m_row" data-type="1" data-chart="line" data-title="温度℃">
						<div class="m_img">
							<img src="../../images/weatherStation/temperature.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center">
							<h1>温度</h1>
						</div>
						<div id="temp_out" class="m_center m_val" style="background: #5FCEFF;color: white;">
							-℃
						</div>
					</div>
					<div class="m_row" data-type="2" data-chart="line" data-title="湿度%">
						<div class="m_img">
							<img src="../../images/weatherStation/humidity.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center">
							<h1>湿度</h1>
						</div>
						<div id="rhum_out" class="m_center m_val" style="background: #29B26A;color: white;">
							-%
						</div>
					</div>
					<div class="m_row" data-type="3" data-chart="line" data-title="风速m/s">
						<div class="m_img">
							<img src="../../images/weatherStation/windSpeed.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center">
							<h1>风速</h1>
						</div>
						<div id="wind" class="m_center m_val" style="background: #CDCDCD;color: #4153B5;">
							-m/s
						</div>
					</div>
					<div class="m_row">
						<div class="m_img">
							<img src="../../images/weatherStation/windSock.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center">
							<h1>风向</h1>
						</div>
						<div id="wind_dirc" class="m_center m_val" style="background: #FA7474;color: white">
							-
						</div>
					</div>
					<div class="m_row" data-type="4" data-chart="bar" data-title="雨量/mm">
						<div class="m_img">
							<img src="../../images/weatherStation/rain.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center">
							<h2>日雨量</h2>
						</div>
						<div id="rain_day" class="m_center m_val" style="background: #1870ED;color: white;">
							-mm
						</div>
					</div>
					<div class="m_row" data-type="5" data-chart="line" data-title="气压Pa">
						<div class="m_img">
							<img src="../../images/weatherStation/airPressure.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center">
							<h1>气压</h1>
						</div>
						<div id="barometer" class="m_center m_val" style="background: #CDCDCD;color: #4153B5;">
							-Pa
						</div>
					</div>
					<div class="m_row" data-type="6" data-chart="line" data-title="日照w/㎡">
						<div class="m_img">
							<img src="../../images/weatherStation/sun.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center">
							<h1>日照</h1>
						</div>
						<div id="solar_radia" class="m_center m_val" style="background: #5FCEFF;color: white;">
							-w/㎡
						</div>
					</div>
					<div class="m_row"  style="align-items:center;" data-type="7" data-chart="bar" data-title="紫外线MEDs">
						<div class="m_img">
							<img src="../../images/weatherStation/radiation.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center">
							<!--<font size="2">紫<br>外<br>线</font>-->
							<h2>紫外线</h2>
						</div>
						<div id="uv" class="m_center m_val" style="background: #CDCDCD;color: #4153B5;">
							-MEDs
						</div>
					</div>
					<div class="m_row" style="align-items:center;" data-type="8" data-chart="line" data-title="①结冰厚度mm">
						<div class="m_img">
							<img src="../../images/weatherStation/icing_one.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center_other">
							<font size=3>路面结冰厚度</font>
						</div>
						<div id="ice0_thick" class="m_center m_val" style="background: #d81e06;color: #ffffff;">
							0.0mm
						</div>
					</div>
					<div class="m_row" style="align-items:center;" data-type="9" data-chart="line" data-title="①路面温度℃">
						<div class="m_img">
							<img src="../../images/weatherStation/roadtemp_one.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center_other">
							<font size=3>道路表面温度</font>
						</div>
						<div id="ice0_temp" class="m_center m_val" style="background: #5FCEFF;color: #000000;">
							- ℃
						</div>
					</div>
					<div class="m_row">
						<div class="m_img">
							<img src="../../images/weatherStation/water_one.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center_other">
							<font size=3>表面是否积水</font>
						</div>
						<div id="ice0_alram01" class="m_center m_val" style="background: #e0620d;color: #ffffff;">
							- 
						</div>
					</div>
					<div class="m_row" style="align-items:center;" data-type="10" data-chart="line" data-title="②结冰厚度mm">
						<div class="m_img">
							<img src="../../images/weatherStation/icing_two.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center_other">
							<font size=3>路面结冰厚度</font>
						</div>
						<div id="ice1_thick" class="m_center m_val" style="background: #d81e06;color: #ffffff;">
							0.0mm
						</div>
					</div>
					<div class="m_row" style="align-items:center;" data-type="11" data-chart="line" data-title="②路面温度℃">
						<div class="m_img">
							<img src="../../images/weatherStation/roadtemp_two.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center_other">
							<font size=3>道路表面温度</font>
						</div>
						<div id="ice1_temp" class="m_center m_val" style="background: #5FCEFF;color: #000000;">
							-℃
						</div>
					</div>
					<div class="m_row">
						<div class="m_img">
							<img src="../../images/weatherStation/water_two.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center_other">
							<font size=3>表面是否积水</font>
						</div>
						<div id="ice0_alram11" class="m_center m_val" style="background: #e0620d;color: #ffffff;">
							- ℃
						</div>
					</div>
					<div id="data_time" style="text-align: center;" style="color: #CDCDCD;">最后更新:2018年xxxxxxxxx</div>
				</div>
			</div>
		</div>
		<script src="../../js/global.js"></script>
		<script>
			mui.plusReady(function() {
				//plus.screen.unlockOrientation();
				plus.screen.lockOrientation("portrait-primary");
				
			});
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						auto: true,
						callback: pulldownRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			var stationCode;
			var resultData = [];

			function pulldownRefresh() {
				stationCode = plus.storage.getItem("stationCode");
				mui.ajax({
					url: WEATHER_STATION_INFO + stationCode,
					type: 'get',
					dataType: 'json',
					timeout: 10000,
					success: function(result) {
						resultData = result.obj.data;
						if(resultData.length == 0) {
							mui.toast("暂无数据")
						} else {
							//console.log(resultData[0].temp_out);
							document.getElementById('temp_out').innerHTML = resultData[0].temp_out + '℃'; //温度
							document.getElementById('rhum_out').innerHTML = resultData[0].rhum_out + '%'; //湿度
							document.getElementById('wind').innerHTML = resultData[0].wind + 'm/s'; //风速
							if(resultData[0].wind_dirc != null) { //风向
								var wind_d = getWinD(resultData[0].wind_dirc, resultData[0].wind);
								document.getElementById('wind_dirc').innerHTML = wind_d.wd.text + "风" + wind_d.ws.level + "级";
							}
							document.getElementById('rain_day').innerHTML = resultData[0].rain_day + 'mm'; //日雨量
							document.getElementById('barometer').innerHTML = resultData[0].barometer + 'Pa'; //气压
							document.getElementById('solar_radia').innerHTML = resultData[0].solar_radia + 'w/㎡'; //日照
							document.getElementById('uv').innerHTML = resultData[0].uv + 'MEDs'; //紫外线
							//console.log("ice--"+resultData[0].ice0_alarm.substr(0,1));
							if(resultData[0].ice0_alarm.substr(0, 1) != 0) {
								document.getElementById('ice0_thick').innerHTML = resultData[0].ice0_thick + 'mm'; //结冰1
							}
							if(resultData[0].ice1_alarm.substr(0, 1) != 0) {
								document.getElementById('ice1_thick').innerHTML = resultData[0].ice1_thick + 'mm'; //结冰2
							}
							var road_temp1=resultData[0].ice0_temp;
							var road_icethick1=resultData[0].ice0_thick;
							if(road_icethick1>0 && road_temp1>0){
								road_temp1=0//异常情况处理
							}
							document.getElementById('ice0_temp').innerHTML = road_temp1 + '℃'; // 路面温度1
							
							var ice0_alarm=resultData[0].ice0_alarm;
							if(ice0_alarm=='010'){
								ice0_alarm='是'
							}else{
								ice0_alarm='否'
							}
							
							document.getElementById('ice0_alram01').innerHTML = ice0_alarm ; // 是否积水
							
							var road_temp2=resultData[0].ice1_temp;
							var road_icethick2=resultData[0].ice1_thick;
							if(road_icethick2>0 && road_temp2>0){
								road_temp2=0//异常情况处理
							}
							document.getElementById('ice1_temp').innerHTML = road_temp2 + '℃'; // 路面温度2
							
							var ice1_alarm=resultData[0].ice1_alarm;
							if(ice1_alarm=='010'){
								ice1_alarm='是'
							}else{
								ice1_alarm='否'
							}
							
							document.getElementById('ice0_alram11').innerHTML = ice1_alarm; // 是否积水
							document.getElementById('data_time').innerHTML = '最后更新时间:' + resultData[0].data_time; //更新时间
						}
					},
					error: function() {
						mui.toast("暂无数据")
					}
				});
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
			}
			
			mui(".mui-content-padded").on("tap",".m_row",function(){
				// data-chart="1" data-title="温度曲线图" data-desc="℃"
				var type=this.getAttribute("data-type");
				var chart=this.getAttribute("data-chart");
				var title=this.getAttribute("data-title");
				if(type==null || chart==null || title==null){
					mui.toast("当前参数无数据图!")
					return;
				}
				checkChart(type,chart,title)
			})
			function checkChart(type,chart,title){
				plus.screen.lockOrientation("landscape-primary");
				mui.openWindow({
					url: 'datacharts.html',
					id: 'datacharts.html',
					show: {
						anishow: 'pop-in'
					},
					styles: {
						popGesture: 'close'
					},
					extras:{
						stationCode:stationCode,
						type:type,
						chart:chart,
						title:title
					},
					waiting: {
						autoshow: true
					}
				});
			}

			//初始进入加载
			//			mui.plusReady(function(){
			//				setTimeout(function(){
			//					mui('#pullrefresh').pullRefresh().pulldownLoading();
			//				},2000);
			//			});
		</script>
	</body>

</html>